<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="1200px">
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="订单付款时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.pay_time) }}</template>
			</el-table-column>
			<el-table-column label="父订单" align="center" prop="pay_sn" />
			<el-table-column label="子订单" align="center" prop="order_sn" />
			<el-table-column label="商品信息" align="center">
				<template #default="scope">
					<div>{{ scope.row.title }}</div>
					<div>({{ scope.row.options_name }})</div>
				</template>
			</el-table-column>
			<el-table-column label="货款(￥)" align="center" prop="money" />
			<el-table-column label="结算时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.finish_time) }}</template>
			</el-table-column>
			<el-table-column label="结算状态" align="center">
				<template #default="scope">{{ paymentGoodsStatusText(scope.row.status) }}</template>
			</el-table-column>
		</el-table>
		<pagination-component v-show="total > 0" :total="total" v-model:page="form.pageNum" v-model:limit="form.pageSize" @pagination="getList" />
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { supplierOrderDetailed } from '/@/api/admin1';
import { paymentGoodsStatusText, timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'paymentGoodsDetailDialog',
	setup() {
		const state: any = reactive({
			title: '货款明细',
			open: false,
			form: {},
			tableList: [],
			loading: false,
			total: 0,
		});

		/********** 点击事件(on开头) **********/

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			reset();
			state.open = true;
			state.form.withdrawal_no = config.withdrawal_no;
			getList();
		};
		// 表单重置
		const reset = () => {
			state.form = {
				pageNum: 1,
				pageSize: 20,
				withdrawal_no: '',
			};
		};
		const getList = () => {
			state.loading = true;
			_supplierOrderDetailed(state.form);
		};

		/********** 网络事件 **********/
		// 订单明细
		const _supplierOrderDetailed = (_data: object) => {
			supplierOrderDetailed(_data)
				.then((res: any) => {
					console.log('订单明细', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			openDialog,
			getList,
			timeDictionary,
			paymentGoodsStatusText,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
